<!--
 * @Descripttion: 
 * @Author: zhanyi
 * @Date: 2021-10-23 14:19:55
 * @FilePath: \wczd-mobile\src\pages\analysis\analysis.vue
-->
<template>
  <div class="analysis">
    <div class="firstTopPanel">
      <div class="top-block">
        <image @click="backClick" class="back-btn" src="../../static/back-btn.png"></image>
        <div class="title">统计分析</div>
      </div>
			<div class="ul-tag">
				<div @click="changeTag('1')" class="li-tag" :class="[{active: tag==='1'}]">任务统计</div>
				<div @click="changeTag('2')" class="li-tag" :class="[{active: tag==='2'}]">隐患统计</div>
			</div>
    </div>
    <div class="analysis-main">
			<div class="analysis-block">
				<task v-if="tag==='1'"></task>
				<danger v-if="tag==='2'"></danger>
			</div>
		</div>
  </div>
</template>

<script>
import task from './task.vue'
import danger from './danger.vue'

export default {
  name: 'analysis',
  components: { task,danger },
  data () {
    return {
			tag: '1',
		}
  },
  computed: {},
  mounted () { 
	},
  watch: {},
  methods: {
    backClick(){
      uni.navigateBack()
    },
		changeTag(tag){
			this.tag = tag
		}
	},
}
</script>

<style scoped lang="scss">
	.firstTopPanel{
	  width: 100%;
	  background: white;
	  background-size: 100% 100%;
		position: fixed;
		background: white;
		top: 0;
		left: 0;
		z-index: 100;
	  .top-block{
	    padding-top: 20upx;
	    padding-bottom: 20upx;
	    display: flex;
	    padding-left: 20upx;
	    align-items: center;
	
	    .back-btn{
	      width: 56upx;
	      height: 56upx;
	    }
	    .title{
	      padding-top: 0;
	      padding-left: 15upx;
				font-size: 40upx;
				font-weight: bold;
	    }
	  }
	}
	.ul-tag{
		display: flex;
		border-top: 1px solid #f5f5f5;
		border-bottom: 1px solid #f5f5f5;
		.li-tag{
			flex: 1;
			text-align: center;
			padding: 10upx;
			background: white;
			
			&.active{
				background: #009fdf;
				color: white;
			}
		}
	}
	
	.analysis-main{
		padding-top: 200upx;
		
		.analysis-block{
			background: white;
			padding-bottom: 40upx;
		}
	}
	#completeChart,#expireChart{
		width: 600upx;
		height: 600upx;
		margin: auto;
	}
	.ztable{
		display: flex;
		.a1{
			width: 30%;
			position: relative;
			padding-left: 100upx;
		}
		.a2{
			width: 40%;
			text-align: center;
		}
		.a3{
			width: 30%;
			text-align: center;
		}
		
	}
	
	.ztable-list{
		.ztable:nth-child(1) .a1::after{
			content: '';
			top: 15upx;
			left: 60upx;
			width: 20upx;
			height: 20upx;
			position: absolute;
			background: #91cc75;
		}
		.ztable:nth-child(2) .a1::after{
			content: '';
			top: 15upx;
			left: 60upx;
			width: 20upx;
			height: 20upx;
			position: absolute;
			background: #ee6666;
		}
		.ztable:nth-child(3) .a1::after{
			content: '';
			top: 15upx;
			left: 60upx;
			width: 20upx;
			height: 20upx;
			position: absolute;
			background: #fac858;
		}
		.ztable:nth-child(4) .a1::after{
			content: '';
			top: 15upx;
			left: 60upx;
			width: 20upx;
			height: 20upx;
			position: absolute;
			background: #73c0de;
		}
	}
</style>
